<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <h2 class="keywords">
        搜索 <span>{{ searchKeyWord }}</span>
      </h2>
      <div>你可能感兴趣</div>
    </div>

    <!-- 导航栏 -->
    <div class="headerBar_navmenu">
      <el-menu :default-active="active" mode="horizontal">
        <el-menu-item index="1" @click="selectType('1', '1')"
          >单曲</el-menu-item
        >
        <el-menu-item index="2" @click="selectType('100', '2')"
          >歌手</el-menu-item
        >
        <el-menu-item index="3" @click="selectType('10', '3')"
          >专辑</el-menu-item
        >
        <el-menu-item index="4" @click="selectType('1014', '4')"
          >视频</el-menu-item
        >
        <el-menu-item index="5" @click="selectType('1000', '5')"
          >歌单</el-menu-item
        >
        <el-menu-item index="6" @click="selectType('1006', '6')"
          >歌词</el-menu-item
        >
        <el-menu-item index="7" @click="selectType('1009', '7')"
          >播客</el-menu-item
        >
        <el-menu-item index="8" @click="selectType('2000', '8')"
          >声音</el-menu-item
        >
        <el-menu-item index="9" @click="selectType('1002', '9')"
          >用户</el-menu-item
        >
      </el-menu>
    </div>

    <!-- 查询结果显示栏 -->
    <!-- 单曲 -->
    <div id="song" v-if="searchType == 1">
      <div class="detail_operate">
        <el-button
          round
          size="medium"
          icon="el-icon-caret-right"
          type="danger"
          v-remove-focus
          >播放全部 <i class="el-icon-plus"></i
        ></el-button>
        <el-button round size="medium" icon="el-icon-download" v-remove-focus
          >下载全部</el-button
        >
      </div>

      <!-- 歌单列表 -->
      <div class="songlist">
        <el-table
          :data="searchResult"
          @row-dblclick="playSong"
          style="width: 100%"
          stripe
          highlight-current-row
          v-double-click
        >
          <el-table-column type="index"> </el-table-column>
          <el-table-column prop="name" label="标题" width="320">
          </el-table-column>
          <el-table-column prop="artistname" label="歌手" width="150">
          </el-table-column>
          <el-table-column prop="album" label="专辑" width="320">
          </el-table-column>
          <el-table-column prop="time" label="时长">
            <template slot-scope="scope">
              {{ scope.row.time | songTimeFilter }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 歌手 -->
    <div id="songer" v-if="searchType == 100">
      <ol>
        <li
          v-for="(songer, key) in searchResult"
          :key="key"
          @click="toSongerDetailPage(songer.id)"
        >
          <el-image
            style="width: 80px; height: 80px"
            :src="songer.picUrl"
            fit="fill"
          ></el-image>
          <div class="name">
            <p>{{ songer.name }} {{ songer.alia }}</p>
          </div>
          <div v-show="songer.accountId" class="icon">
            <i
              class="el-icon-user"
              @click="toUserDetailPage(songer.accountId)"
            ></i>
          </div>
        </li>
      </ol>
    </div>

    <!-- 专辑 -->
    <div id="album" v-if="searchType == 10">
      <ol>
        <li
          v-for="(album, key) in searchResult"
          :key="key"
          @click="toAlbumlistPage(album.id)"
        >
          <el-image
            style="width: 80px; height: 80px"
            :src="album.picUrl"
            fit="fill"
          ></el-image>
          <div class="plate"></div>
          <div class="name">
            <p>{{ album.name }}</p>
          </div>
          <div class="artistname">
            <p @click="toSongerDetailPage(album.artistId)">
              {{ album.artistname }} {{ album.alia }}
            </p>
          </div>
        </li>
      </ol>
    </div>

    <!-- 视频 -->
    <div id="video" v-if="searchType == 1014">视频</div>

    <!-- 歌单 -->
    <div id="songlist" v-if="searchType == 1000">
      <ol>
        <li
          v-for="(songlist, key) in searchResult"
          :key="key"
          @click="toSonglistPage(songlist.id)"
        >
          <el-image
            style="width: 80px; height: 80px"
            :src="songlist.picUrl"
            fit="fill"
          ></el-image>
          <div class="name">
            <p>{{ songlist.name }}</p>
          </div>
          <div class="trackCount">
            <p>{{ songlist.trackCount }}首</p>
          </div>
          <div class="nickname">
            <p>
              by
              <span @click="toUserDetailPage(songlist.userId)">
                {{ songlist.nickname }}</span
              >
            </p>
          </div>
          <div class="playCount">
            <p>
              <i class="el-icon-video-play"></i
              >{{ songlist.playCount | playCountFilter }}
            </p>
          </div>
        </li>
      </ol>
    </div>

    <!-- 歌词 -->
    <div id="lyrics" v-if="searchType == 1006">歌词</div>

    <!-- 播客 -->
    <div id="podcast" v-if="searchType == 1009">播客</div>

    <!-- 声音 -->
    <div id="sound" v-if="searchType == 2000">声音</div>

    <!-- 用户 -->
    <div id="user" v-if="searchType == 1002">
      <ol>
        <li
          v-for="(user, key) in searchResult"
          :key="key"
          @click="toUserDetailPage(user.userId)"
        >
          <el-image
            style="width: 80px; height: 80px"
            :src="user.picUrl"
            fit="fill"
          ></el-image>
          <div class="name">
            <p>
              {{ user.nickname }} &ensp;
              <i class="el-icon-male" v-if="user.gender == 1"></i>
              <i class="el-icon-female" v-if="user.gender == 2"></i>
            </p>
          </div>
          <div v-show="user.description" class="desc">
            {{ user.description }}
          </div>
        </li>
      </ol>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  data() {
    return {
      // 默认导航栏高亮
      active: '1',
      // 搜索类型
      searchType: '1',
      // 查询结果
      searchResult: [],
    }
  },
  computed: {
    ...mapState(['userId', 'searchKeyWord']),
  },
  created() {
    // this.keepType()
    this.routerIsActiveInfo()
  },
  mounted() {
    this.getCloudSearch()
  },
  watch: {
    searchType: function (newVal, oldVal) {
      this.getCloudSearch()
    },
    searchKeyWord: function (newVal, oldVal) {
      this.getCloudSearch()
    },
  },
  filters: {
    // 歌曲时间过滤器
    songTimeFilter: function (val) {
      const dt = new Date(val)
      // 分秒
      const mm = (dt.getMinutes() + '').padStart(2, '0')
      const ss = (dt.getSeconds() + '').padStart(2, '0')

      return `${mm}:${ss}`
    },
    // 播放次数过滤器
    playCountFilter: function (val) {
      if (10000 > val) {
        const play = parseInt(val)
        return `${play}`
      }
      if (val > 10000 && 100000000 > val) {
        const play = parseInt(val / 10000)
        return `${play}万`
      }
      if (val > 100000000) {
        const play = parseInt(val / 100000000)
        return `${play}亿`
      }
    },
  },
  methods: {
    ...mapMutations([
      'changePath',
      'changeIsActive',
      'changeIsMyself',
      'changeSongerId',
      'changeSonglistId',
      'changeAlbumlistId',
      'changeMusicPlayInfo',
      'changeSearchKeyWord',
      'changeTheDetailUserId',
    ]),

    //  侧边栏信息
    routerIsActiveInfo() {
      const isActive = ''
      this.changeIsActive(isActive)
    },
    // 选择查询类型
    selectType(type, index) {
      this.searchType = type

      // const typeInfo = {
      //   type: type,
      //   index: index,
      //   searchKeyWord: this.data.searchKeyWord,
      // }
      // window.sessionStorage.setItem(
      //   'searchKeyWord_typeInfo',
      //   JSON.stringify(typeInfo)
      // )
    },
    // 切换页面后保持页面数据
    keepType() {
      let typeInfo =
        window.sessionStorage.getItem('searchKeyWord_typeInfo') || ''

      if (!typeInfo) {
        return
      }

      typeInfo = JSON.parse(typeInfo)

      this.active = typeInfo.index
      this.searchType = typeInfo.type
      // this.searchKeyWord = typeInfo.searchKeyWord
      this.changeSearchKeyWord(typeInfo.searchKeyWord)
    },

    // 获取搜索结果（更全）
    async getCloudSearch() {
      const { data: res } = await this.$http({
        url: `/cloudsearch?keywords=${this.searchKeyWord}&type=${this.searchType}`,
        withCredentials: true, //关键
      })
      console.log(res)

      if (this.searchType == 1) {
        this.searchResult.length = 0
        this.getSonglistAboutInfo(res.result.songs)
        return
      }
      if (this.searchType == 100) {
        this.searchResult.length = 0
        this.getSongerlistAboutInfo(res.result.artists)
        return
      }
      if (this.searchType == 10) {
        this.searchResult.length = 0
        this.getAlbumlistAboutInfo(res.result.albums)
        return
      }
      if (this.searchType == 1000) {
        this.searchResult.length = 0
        this.getSongListlistAboutInfo(res.result.playlists)
        return
      }
      if (this.searchType == 1002) {
        this.searchResult.length = 0
        this.getUserlistAboutInfo(res.result.userprofiles)
        return
      }
    },
    // 提取单曲列表要用的相关信息的相关信息
    getSonglistAboutInfo(list) {
      let index = 0
      let tempListDatas = []

      list.map((item) => {
        let listObj = {}

        /**
         * 音乐id id
         * 音乐时长 time
         * 音乐名称 name
         * 音乐专辑名称 album
         * 音乐图片 picUrl
         * 音乐艺术家名称 artistname
         */
        listObj.id = item.id
        listObj.time = item.dt
        listObj.name = item.name
        listObj.album = item.al.name
        listObj.picUrl = item.al.picUrl

        let str = ''
        for (let i = 0; i < item.ar.length; i++) {
          str = str + item.ar[i].name
          if (i != item.ar.length - 1) {
            str = str + '/'
          }
        }
        listObj.artistname = str

        listObj.index = index
        index++
        return tempListDatas.push(listObj)
      })

      this.searchResult = tempListDatas
    },
    // 提取歌手列表要用的相关信息的相关信息
    getSongerlistAboutInfo(list) {
      let tempListDatas = []

      list.map((item) => {
        let listObj = {}

        listObj.id = item.id
        listObj.name = item.name
        listObj.picUrl = item.picUrl
        listObj.accountId = item.accountId

        listObj.alia = ''
        if (item.alias[0]) {
          listObj.alia = '(' + item.alias[0] + ')'
        }

        return tempListDatas.push(listObj)
      })

      this.searchResult = tempListDatas
    },
    // 提取专辑列表要用的相关信息的相关信息
    getAlbumlistAboutInfo(list) {
      let tempListDatas = []

      list.map((item) => {
        let listObj = {}

        listObj.id = item.id
        listObj.name = item.name
        listObj.picUrl = item.picUrl
        listObj.artistId = item.artist.id
        listObj.artistname = item.artist.name

        listObj.alia = ''
        if (item.artist.alias[0]) {
          listObj.alia = '(' + item.artist.alias[0] + ')'
        }

        return tempListDatas.push(listObj)
      })

      this.searchResult = tempListDatas
    },
    // 提取歌单列表要用的相关信息的相关信息
    getSongListlistAboutInfo(list) {
      let tempListDatas = []

      list.map((item) => {
        let listObj = {}

        listObj.id = item.id
        listObj.name = item.name
        listObj.picUrl = item.coverImgUrl
        listObj.userId = item.creator.userId
        listObj.nickname = item.creator.nickname
        listObj.playCount = item.playCount
        listObj.trackCount = item.trackCount

        return tempListDatas.push(listObj)
      })

      this.searchResult = tempListDatas
    },
    // 提取用户列表要用的相关信息的相关信息
    getUserlistAboutInfo(list) {
      let tempListDatas = []

      list.map((item) => {
        let listObj = {}

        listObj.userId = item.userId
        listObj.gender = item.gender
        listObj.picUrl = item.avatarUrl
        listObj.nickname = item.nickname
        listObj.description = item.description

        if (item.description == '' && item.avatarDetail) {
          if (item.avatarDetail.userType == 4 && item.avatarDetail.userType) {
            listObj.description = '网易音乐人'
          }
        }

        return tempListDatas.push(listObj)
      })

      this.searchResult = tempListDatas
    },

    // 播放歌曲
    playSong(row) {
      let thePlaySongInfo = row
      let thePlaySongListInfo = this.searchResult

      const info = {
        thePlaySongInfo,
        thePlaySongListInfo,
      }

      this.changeMusicPlayInfo(info)
    },
    // 跳转到个人信息页面
    toUserDetailPage(userId) {
      const info = {
        path: '/view/userdetail',
        isMyself: this.userId == userId,
        theDetailUserId: userId,
      }

      this.changePath(info.path)
      this.changeIsMyself(info.isMyself)
      this.changeTheDetailUserId(info.theDetailUserId)

      this.$emit('getUserDetailInfo')
    },
    // 跳转到歌手详情页面
    toSongerDetailPage(songerId) {
      const info = {
        path: '/view/songerdetail',
        songerId: songerId,
      }

      this.changePath(info.path)
      this.changeSongerId(info.songerId)

      this.$emit('getSongerDetailInfo')
    },
    // 传递 专辑数据，并跳转到专辑页面
    toAlbumlistPage(albumlistId) {
      const info = {
        path: '/view/albumlist',
        isActive: '',
        albumlistId: albumlistId,
      }

      this.changePath(info.path)
      this.changeIsActive(info.isActive)
      this.changeAlbumlistId(info.albumlistId)

      this.$emit('getAlbumlistId')
    },
    // 传递 歌单数据，并跳转到歌单页面
    toSonglistPage(songlistId) {
      const info = {
        path: '/view/songlist',
        isActive: songlistId,
        songlistId: songlistId,
      }

      this.changePath(info.path)
      this.changeIsActive(info.isActive)
      this.changeSonglistId(info.songlistId)

      this.$emit('getSonglistId')
    },
  },
}
</script>

<style lang="less" scoped>
.header {
  margin-left: 26px;
  div:nth-child(2) {
    font-size: 14px;
  }
}

.headerBar_navmenu {
  margin-left: 26px;
  margin-bottom: 8px;

  /deep/ ul.el-menu {
    border-bottom: 0px;
  }
  /deep/ li.el-menu-item {
    height: 48px;
    font-size: 16px;
    padding: 0 30px 0 0;
  }
  /deep/ li.el-menu-item.is-active {
    font-size: 18px;
    font-weight: 700;
    border-bottom: 3.6px solid red;
    box-sizing: border-box;
    padding: 0 5px;
    margin: 0 25px 0 0;
  }
}

#song {
  margin-left: 26px;
  margin-right: 26px;
  .detail_operate {
    margin-top: 18px;
    margin-bottom: 18px;
    /deep/ .el-button--medium.is-round {
      padding: 6px 10px;
    }
    /deep/ i {
      font-size: 20px;
    }
    /deep/ span {
      position: relative;
      top: -3px;
    }
    /deep/ .el-icon-plus {
      position: relative;
      top: 3px;
    }
  }

  .songlist {
    /deep/ .el-table_1_column_1 {
      padding-left: 20px;
    }
    /deep/ div.cell {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /deep/ .el-table__cell {
      cursor: pointer;
    }
  }
}

#songer {
  margin: 0 26px;
  ol {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      display: flex;
      padding: 10px;
      cursor: pointer;
      position: relative;
      > .el-image {
        border-radius: 12px;
        margin: 0 10px;
      }
      > .name {
        width: 185px;
        color: #959595;
        p {
          width: 170px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          position: relative;
          top: 16px;
        }
      }
      > .icon {
        cursor: pointer;
        color: white;
        background-color: #ec4141;
        border-radius: 50%;
        font-size: 14px;
        width: 20px;
        height: 20px;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        > .el-icon-user {
          position: relative;
          left: 3px;
        }
      }
    }
    li:nth-child(odd) {
      background-color: #dad8d825;
    }
    li:hover {
      background-color: #93c6f557;
    }
  }
}

#album {
  margin: 0 26px;
  ol {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      display: flex;
      padding: 10px;
      cursor: pointer;
      position: relative;
      > .el-image {
        border-radius: 12px;
        margin: 0 10px;
        box-shadow: 10px 0px 6px rgba(65, 65, 65, 0.253);
      }
      > .plate {
        position: absolute;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: black;
        top: 10px;
        z-index: -2;
        left: 32px;
      }
      > .name {
        width: 320px;
        color: black;
        margin-left: 12px;
        p {
          width: 220px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          position: relative;
          top: 16px;
        }
      }
      > .artistname {
        width: 280px;
        color: #959595;
        p {
          width: 170px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          position: relative;
          top: 16px;
        }
      }
    }
    li:nth-child(odd) {
      background-color: #dad8d825;
    }
    li:hover {
      background-color: #93c6f557;
    }
  }
}

#video {
  margin: 0 26px;
}

#songlist {
  margin: 0 26px;
  ol {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      display: flex;
      padding: 10px;
      position: relative;
      > .el-image {
        border-radius: 12px;
        margin: 0 10px;
      }

      > .name {
        width: 320px;
        color: black;
        p {
          width: 260px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          position: relative;
          top: 16px;
        }
      }
      > .trackCount {
        width: 100px;
        color: #959595;
        p {
          width: 80px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          position: relative;
          top: 16px;
        }
      }
      > .nickname {
        width: 280px;
        color: #959595;
        p {
          width: 220px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          position: relative;
          top: 16px;
          span {
            cursor: pointer;
          }
          span:hover {
            color: black;
          }
        }
      }
      > .playCount {
        width: 100px;
        color: #959595;
        p {
          width: 90px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          position: relative;
          top: 16px;
          color: black;
          i.el-icon-video-play {
            font-size: 20px;
            padding-right: 2px;
            position: relative;
            top: 2px;
          }
        }
      }
    }
    li:nth-child(odd) {
      background-color: #dad8d825;
    }
    li:hover {
      background-color: #93c6f557;
    }
  }
}

#lyrics {
  margin: 0 26px;
}

#podcast {
  margin: 0 26px;
}

#sound {
  margin: 0 26px;
}

#user {
  margin: 0 26px;
  ol {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      display: flex;
      padding: 10px;
      cursor: pointer;
      position: relative;
      > .el-image {
        border-radius: 50%;
        margin: 0 10px;
      }
      > .name {
        width: 185px;
        color: #959595;
        p {
          width: 180px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          position: relative;
          top: 16px;
          .el-icon-male {
            background-color: #c0f3ff;
            border-radius: 50%;
            padding: 2px;
            color: #3da1d1;
          }
          .el-icon-female {
            background-color: #ffcde8;
            border-radius: 50%;
            padding: 2px;
            color: #ed6da3;
          }
        }
      }

      > .desc {
        cursor: pointer;
        color: #959595;
        font-size: 14px;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    li:nth-child(odd) {
      background-color: #dad8d825;
    }
    li:hover {
      background-color: #93c6f557;
    }
  }
}
</style>